<template>
  <div class="main-app">
    <el-row style="margin-top: 10px">
      <el-form ref="form" :model="form" :rules="rules" label-width="200px">
        <el-col :span="8">
          <el-form-item label="产废单位:">
            <el-input v-model="form.wpcName" disabled />
          </el-form-item>
          <el-form-item label="企业法人:">
            <el-input v-model="form.wpcLegalRepresentativeName" disabled />
          </el-form-item>

        </el-col>
        <el-col :span="12">

          <el-form-item label="" required style="margin-top: -20px;" />
          <el-form-item label="通讯地址:">
            <el-input v-model="form.wpcAddress" disabled />
          </el-form-item>
          <el-form-item label="联系电话:">
            <el-input v-model="form.wpcLegalRepresentativePhone" disabled />
          </el-form-item>
          <el-form-item label="拟转移日期:">
            <div class="block">
              <el-date-picker v-model="form.transportTime" disabled type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;" format="yyyy 年 MM 月 dd 日" />
            </div>
          </el-form-item>

        </el-col>
      </el-form>
    </el-row>
    <el-divider content-position="left">拟转移危险废物</el-divider>
    <el-row style="margin-top: 10px; padding: 10px">
      <el-form :inline="true" class="form-inline">

        <!--        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" @click="desAdd">添加废物详细</el-button>
        </el-form-item> -->
        <el-form-item>
          <el-button icon="el-icon-arrow-left" @click="cancel">
            返 回
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-show="!isApprovaled" icon="el-icon-folder-checked" type="success" @click="approval('20')">审核通过
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-show="!isApprovaled" icon="el-icon-folder-delete" type="danger" @click="approval('30')">拒绝审核
          </el-button>
        </el-form-item>

        <!-- 来宾市不需要此功能 -->
        <el-form-item>
          <el-button v-show="!isApprovaled" icon="el-icon-s-promotion" type="primary" @click="approval('15')">
            审核通过并转交监管端审核</el-button>
        </el-form-item>

        <el-form-item>
          <div>拟定转移废物种类 ：{{ form.wastCount }}</div>
        </el-form-item>
        <el-form-item>
          <el-divider direction="vertical" />
        </el-form-item>
        <el-form-item>
          <div>拟定转移废物总重量 ：{{ form.wastWeight }} 吨</div>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row style="margin-top: -10px">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="废物名称" width="180" />
        <el-table-column prop="categoryContent" label="废物类别" />
        <el-table-column prop="codeId" label="废物代码" />
        <el-table-column prop="characteristicContent" label="危险特性" />
        <el-table-column prop="physicalProperties" label="废物形态">
          <template slot-scope="scope">
            <el-tag size="medium" style="width: 100%; text-align: center;" effect="dark">
              {{ scope.row.physicalProperties |parsePhysicalProperties }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="hazardousSubstancesName" label="危害成分" />
        <el-table-column prop="mainComponents" label="主要成分" />
        <!-- <el-table-column prop="containerCategory" label="容器类型">
          <template slot-scope="scope">
            <el-tag size="medium" style="width: 100%; text-align: center;" effect="dark">
              {{ scope.row.containerCategory | parseContainerCategory }}
            </el-tag>
          </template>
        </el-table-column> -->
        <el-table-column prop="wastWeight" label="废物转移量 (吨)" width="180" />
      </el-table>
      <div class="page">
        <el-pagination background :current-page.sync="currentPage" layout="total,prev, pager, next, sizes"
          :total="total" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" @current-change="handleCurrentChange"
          @size-change="handleSizeChange" />
      </div>

    </el-row>
    <!-- <el-row style="margin-top: 40px; text-align: center">
      <el-form :inline="true" class="form-inline">
        <el-form-item>
          <el-button type="success" @click="approval('20')">审核通过</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="approval('30')">拒绝审核</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="approval('15')">审核通过并转交监管端审核</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel">返 回</el-button>
        </el-form-item>
      </el-form>
    </el-row> -->
  </div>
</template>

<script>
  // Table组件相关逻辑，需要引用
  import {
    pageMixin
  } from "../../../mixins/index";
  import {
    PhysicalProperties,
    ContainerType
  } from "../../../utils/resource.js";
  import {
    getTransportPlanWastList,
    getTransportPlanInfoById,
    approval
  } from '../../../api/wastereceipt.js';
  import {

    getUnitInfoById
  } from '../../../api/system.js';
  import {
    getFloat,
    parseStartAndEndTimeList,
  } from '../../../utils/index.js';
  export default {
    filters: {
      parseDate(value) {
        if (value) {
          return value.replace("T", " ");
        }
      },

      parsePhysicalProperties(value) {
        if (value != null) {
          return PhysicalProperties.find((p) => p.value === `${value}`).label;
        }
      },
      parseContainerCategory(value) {
        if (value != null) {
          return ContainerType.find((p) => p.value === `${value}`).label;
        }
      },

    },
    mixins: [pageMixin],
    data() {
      return {
        form: {
          id: "",

          wpcId: "",
          wpcName: "",
          wpcAddress: "",
          wpcLegalRepresentativeId: "",
          wpcLegalRepresentativeName: "",
          wpcLegalRepresentativePhone: "",
          startProposedTransferTime: "",
          endProposedTransferTime: "",
          transportTime: [],
          wastCount: 0,
          wastWeight: 0,
        },
        isApprovaled: false,

        rules: {
          transferPlanNumber: [{
            required: true,
            message: "请填写转运计划编号",
            trigger: "blur"
          }],

          transportTime: [{
            required: true,
            message: "请填写转运时间",
            trigger: "change"
          }],

          tcId: [{
            required: true,
            message: "请选择运输单位",
            trigger: "change"
          }],
          ccId: [{
            required: true,
            message: "请选择接受单位",
            trigger: "change"
          }],
        },
      };
    },
    async created() {
      const {
        id
      } = this.$route.params;
      console.log("ID为：" + id);
      if (id) {
        this.form.id = id;
        await this.init();
      }
    },
    methods: {
      async init() {
        var searchData = {
          limit: this.pageSize,
          page: this.currentPage,
          searchParam: JSON.stringify({
            TransferPlanId: this.form.id,
          })
        }
        this.loading = true;
        this.tableData = [];
        Promise.all([await getTransportPlanInfoById(this.form.id), await getTransportPlanWastList(searchData)])
          .then((result) => {
            this.form = result[0].data;
            if (this.form.type !== "10") {
              this.isApprovaled = true;
            }

            result[1].data.forEach(item => {
              item.id = item.hazardousWasteId;
            })
            this.tableData = result[1].data;

            this.total = result[1].count;
            this.loading = false;
            // 设置废物数量
            this.form.wastCount = this.tableData.length;
            // 设置废物总重量
            this.addWasteWeight();

            // 设置时间
            if (!this.form.startProposedTransferTime) {
              this.form.transportTime = [];
            } else {
              this.form.startProposedTransferTime = this.form.startProposedTransferTime.replace("T", " ");
              this.form.endProposedTransferTime = this.form.endProposedTransferTime.replace("T", " ");
              this.form.transportTime = parseStartAndEndTimeList(this.form.startProposedTransferTime, this.form
                .endProposedTransferTime);
            }
          })
      },

      async getUnitInfoById(Guid) {
        const {
          data
        } = await getUnitInfoById(Guid);
        if (data) {
          this.form.wpcId = data.id;
          this.form.wpcName = data.name;
          this.form.wpcAddress = data.detailedAddress;
          this.form.wpcLegalRepresentativeId = data.legalRepresentativeId;
          this.form.wpcLegalRepresentativeName = data.legalRepresentativeName;
          this.form.wpcLegalRepresentativePhone = data.legalRepresentativePhone;
        }
      },
      addWasteWeight() {
        this.form.wastWeight = 0;
        this.tableData.forEach(item => {
          if (item.wastWeight < 0) {
            item.wastWeight = 0
          }
          this.form.wastWeight += getFloat(item.wastWeight, 5)
        })
      },

      // 20: 审核已通过  30: 审核未通过
      async approval(value) {
        let confimText = "";
        if (value === "20") {
          confimText = "审核通过";
        } else if (value === "30") {
          confimText = "拒绝审核";
        } else {
          confimText = "审核通过并转交监管端审核";
        }
        this.$confirm(`此操作将所选转运计划信息状态设置为：${confimText}状态, 是否继续?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          var formdata = {
            Id: this.form.id,
            Type: value
          };
          // 操作数据
          await approval(formdata);
          // 清除转运申请详情存在localstroage的临时表单内容
          localStorage.removeItem('tempTransportPlanFormInfo');
          this.$router.push("/wastereceipt/planfiling");
          this.$message({
            type: "success",
            message: `${confimText}状态更新成功!`,
          });
        });
      },

      cancel() {
        // 清除转运申请详情存在localstroage的临时表单内容
        localStorage.removeItem('tempTransportPlanFormInfo');
        this.$router.push("/wastereceipt/planfiling");
      },
    },
  };
</script>
